import React from 'react';
import { UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import style from './Home.module.css'
import { useLocation, useNavigate } from 'react-router-dom';
import UseRoutes from '../../router/UseRoutes';
import './Home.css'

const { Sider } = Layout;
const App: React.FC = () => {
  const navigate = useNavigate()
  const { pathname } = useLocation()
  return (
    <Layout className={style.layout}>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
      >
        <div className={style.logo}>稽查数据后台系统</div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[pathname]}
          items={[UserOutlined, VideoCameraOutlined].map(
            (icon, index) => {
              let label = ''
              let key = ''
              switch (index) {
                case 0:
                  label = '教学大纲执行'
                  key = '/video'
                  break
                case 1:
                  label = '课堂管理'
                  key = '/camera'
                  break;
              }
              return {
                key,
                icon: React.createElement(icon),
                label
              }
            }
          )}
          onClick={(e) => { navigate(e.key) }}
        />
      </Sider>
      <Layout>
        <UseRoutes />
      </Layout>
    </Layout>
  );
};

export default App;